<!-- 个人中心 -->
<template>
  <div>
    <div>
      <p v-if="username">欢迎{{username.result.relname}}~</p>

    </div>
    <div class="box"
         style="width:100%;height:500px">
      <swiper :options="swiperOption"
              ref="mySwiper"
              >
        <!-- slides -->
        <swiper-slide v-for='(item,i) of 6'
                      :key="i">
          {{i}}
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"
             slot="pagination"></div>
        <div class="swiper-button-prev"
             slot="button-prev"></div>
        <div class="swiper-button-next"
             slot="button-next"></div>
      </swiper>

    </div>
  </div>
</template>
<script>
import storage from 'good-storage'
export default {
  data () {
    return {
      username: '',
      swiperOption: {
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 自动轮播
        autoplay: {
          delay: 5000
        },
        // 开启循环模式
        loop: true,
        // 开启鼠标滚轮控制Swiper切换
        mousewheel: true
      }
    }
  },
  mounted () {
    this.username = storage.get('userData')
  }
}
</script>
<style lang="less" scoped>
.swiper-slide {
  width: 100%;
  height: 500px;
  line-height: 500px;
  font-size: 50px;
  text-align: center;
  background-color: rosybrown;
}
</style>
